<template>
  <el-dialog
    :title="formData.id?'编辑房产':'增加房产'"
    :visible="isShow"
    width="40%"
    @close="closeFn"
  >
    <el-form
      ref="form"
      :rules="rules"
      label-width="70px"
      :model="formData"
    >
      <el-form-item label="经纪">
        <el-select
          v-model="formData.agent.name"
          placeholder="select"
        >
          <el-option
            v-for="item in agentList"
            :key="item.id"
            :value="item.name"
            @click.native="getAgentId(item.id)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="formData.category.title">
          <el-option
            v-for="item in classifyList"
            :key="item.id"
            :value="item.title"
            @click.native="getClassifyId(item.id)"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="标题"
        prop="title"
      >
        <el-input v-model="formData.title" />
      </el-form-item>
      <el-form-item label="标签">
        <el-tag
          v-for="tag in formData.tags"
          :key="tag"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          v-if="inputVisible"
          ref="saveTagInput"
          v-model="inputValue"
          style="width:90px"
          class="input-new-tag"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        />
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput"
        >+ 新建标签</el-button>
      </el-form-item>

      <el-form-item label="地址">
        <el-row type="flex">
          <el-select v-model="formData.address">
            <el-option
              v-for="item in agentList"
              :key="item.id"
              :value="item.address"
            />
          </el-select>
          <el-input v-model="formData.address" />
        </el-row>
      </el-form-item>

      <el-form-item label="价格">
        <el-input v-model="formData.price" />
      </el-form-item>

      <el-form-item
        label="描述"
        prop="desc"
      >
        <el-input
          v-model="formData.desc"
          type="textarea"
        />
      </el-form-item>

      <el-form-item label="内容">
        <quill-editor
          v-model="formData.content"
          @blur="$refs.form.validateField('content')"
        />
      </el-form-item>

      <el-form-item label="介绍图片">
        <imgUpload
          ref="img1"
          v-model="formData.photos"
          :is-show="false"
        />
        <el-input placeholder="直接输入地址,直接上传" />
      </el-form-item>

      <el-form-item label="封面">
        <imgUpload
          ref="img2"
          @imgUrl="updateFm"
        />
        <el-input
          v-model="formData.image"
          placeholder="直接输入地址，直接上传"
        />
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="closeFn"
      >取 消</el-button>
      <el-button
        size="small"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getAgant } from '@/api/agant'
import { getClassify } from '@/api/classify'
import imgUpload from './imgUpload.vue'
import { addArce, getArceById, updateArce } from '@/api/arce'
export default {
  components: {
    imgUpload
  },
  props: {
    isShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      formData: {
        image: '',
        title: '',
        desc: '',
        address: '',
        category: {},
        agent: {},
        price: '',
        content: '',
        photos: [],
        tags: []
      },
      agID: '',
      clId: '',
      rules: {
        title: [{ required: true, message: '标题内容必填', trigger: 'blur' }],
        desc: [{ required: true, message: '标题内容必填', trigger: 'blur' }]
      },
      agentList: [],
      classifyList: [],
      inputVisible: false,
      inputValue: ''
    }
  },
  async created() {
    await this.getAgentList()
    await this.getClassifyList()
  },
  methods: {
    updateFm(url) {
      console.log(url)
      this.formData.image = url
    },
    async getArceByIdY(id) {
      const res = await getArceById(id)
      res.data.category = res.data.category === null ? {} : res.data.category
      res.data.agent = res.data.agent === null ? {} : res.data.agent
      this.formData = res.data
      console.log(this.formData)
      const arr = []
      Array.isArray(this.formData.photos) && this.formData.photos.filter(v => {
        arr.push({ url: `${v}` })
      })
      console.log(arr)
      this.$refs.img1.fileList = arr
      this.$refs.img2.fileList = [{ url: `${this.formData.image}` }]
    },
    resetForm() {
      this.formData = {
        image: '',
        title: '',
        desc: '',
        address: '',
        category: {},
        agent: {},
        price: '',
        content: '',
        photos: [],
        tags: []
      }
    },
    resetID() {
      this.clId = ''
      this.agID = ''
    },
    closeFn() {
      this.$emit('update:isShow', false)
      this.$refs.form.resetFields()
      this.$refs.img2.imgUrl = ''
      this.$refs.img1.imgUrl = ''
      this.$refs.img1.fileList = []
      this.resetForm()
      this.resetID()
    },
    handleClose(tag) {
      Array.isArray(tag) === 'Array' ? tag : []
      this.formData.tags.splice(this.formData.tags.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.formData.tags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    async getAgentList() {
      const res = await getAgant()
      this.agentList = res.data
    },
    async getClassifyList() {
      const res = await getClassify()
      this.classifyList = res.data
    },
    getAgentId(id) {
      console.log(id)
      this.agID = id
    },
    getClassifyId(id) {
      this.clId = id
      console.log(id)
    },
    async submit() {
      await this.$refs.form.validate()
      if (this.formData.id) {
        this.formData.agent = this.agID ? this.agID : this.formData.agent.id
        this.formData.category = this.clId ? this.clId : this.formData.category.id
        const arr = []
        this.$refs.img1.fileList.forEach(element => {
          arr.push(element.url)
        })
        this.formData.photos = arr
        this.formData.image = this.$refs.img2.fileList[0].url
        this.$refs.img2.fileList = []
        await updateArce(this.formData)
        this.$refs.img1.fileList = []
        this.resetForm()
        this.$emit('updateArce')
      } else {
        this.formData.agent = this.agID
        this.formData.category = this.clId
        const arr = []
        this.$refs.img1.fileList.forEach(element => {
          arr.push(element.url)
        })
        this.formData.photos = arr
        this.formData.image = this.$refs.img2.fileList[0] && this.$refs.img2.fileList[0].url
        console.log(this.formData.image)
        await addArce(this.formData)
        this.$refs.img1.fileList = []
        this.$refs.img2.fileList = []
        this.resetForm()
        this.$emit('addArce')
      }
      this.closeFn()
    }

  }
}
</script>

<style>
</style>
